<script>
import { main } from '@/util/mixins'
import * as service from 'services/x-start/mgr/scene'
import { flatten } from 'array-flatten'

export default {
  mixins: [main],
  data() {
    return {
      service,
    }
  },
  methods: {
    append(data) {
      const newChild = {
        children: [],
        name: '',
      }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    remove(node, data) {
      if (data.id) {
        this.$confirm('你真的要删除该数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.service.del({ id: data.id }).then(
              (res) => {
                this.$message.success('删除成功')
                this.getList()
              },
              (err) => {
                this.$message.error(err.message)
              }
            )
          })
          .catch(() => {})
      } else {
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex((d) => d.id === data.id)
        children.splice(index, 1)
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.name === '二级 3-1') {
        return type !== 'inner'
      } else {
        return true
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.name.indexOf('三级 3-2-2') === -1
    },
    save(data, node) {
      let parent = node.parent ? node.parent.data : {}
      this.service
        .save({
          ...data,
          parentId: parent.id,
        })
        .then(
          (res) => {
            this.$message.success('保存成功')
            this.getList()
          },
          (err) => {
            this.$message.error(err.message)
          }
        )
    },
    add() {
      this.tableData.push({
        children: [],
        parentId: null,
        name: '',
      })
    },
  },
  watch: {},
}
</script>

<template lang="pug">
Template(
  @sizeChange='handleSizeChange',
  @currentChange='handleCurrentChange',
  ref='child'
)
  span(slot='title') 场景管理
  .btns(slot='rightBtn')
    el-button.el-icon-plus(type='primary', plain, @click='add()') 添加顶级
  .list(slot='list')
    //- el-tree(
    //-   :data='tableData',
    //-   ref='tree',
    //-   node-key='id',
    //-   default-expand-all,
    //-   draggable,
    //-   :allow-drop='allowDrop',
    //-   :allow-drag='allowDrag'
    //- )
    el-tree(:data='tableData', ref='tree', node-key='id', default-expand-all)
      span.custom-tree-node(slot-scope='{ node, data }')
        input.form-control(v-model='data.name')
        span.options(style='float:right')
          .icon.el-icon-upload2(@click.stop='save(data, node)', title='保存')
          .icon.el-icon-plus(
            @click.stop='append(data)',
            v-if='data.id && data.parentId == 0',
            title='添加'
          )
          .icon.el-icon-delete(@click.stop='remove(node, data)', title='删除')
</template>

<style lang="stylus" scoped>
.icon
  color #ff6d60
  font-size 20px
  margin-left 20px
  line-height 30px
.list
  >>>.el-tree-node__content
    height inherit
.custom-tree-node
  display flex
  justify-content space-between
  width 100%
  input
    max-width 200px
</style>